<template>
  <div class="opinion">
    <a-form layout="inline">
      <a-row>
        <a-col :span="16">
          <a-row>
            <a-col :span="24" style="display: flex; white-space: nowrap">
              <a-form-item label="意见">
                <a-input v-model="value" placeholder="请输入意见"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col
          :span="8"
          style="display: flex; justify-content: flex-end; flex-wrap: wrap"
        >
          <a-form-item style="width: auto">
            <a-button
              type="primary"
              @click="optionAdd"
              style="margin-right: 7px"
              >保存</a-button
            >
            <a-button @click="getList(1)">刷新</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      rowKey="id"
      :rowClassName="rowClassName"
      :customRow="customRow"
      style="padding-right: 10px"
    >
      <template slot="action" slot-scope="record">
        <a href="javascript:void(0)" @click="select(record)">选择</a>
        &nbsp;&nbsp;
        <a href="javascript:void(0)" @click="optionDelete(record)">删除</a>
      </template>
    </a-table>
  </div>
</template>
<!-- 日常考评办理意见 -->
<script>
import {
  flowOptionList,
  flowOptionAdd,
  flowOptionDeleteBatch,
} from "../api/common";
export default {
  name: "opinion",
  props: {
    type: {
      type: String,
      default() {
        return "";
      },
    },
    rowId: {
      type: String,
      default() {
        return "id";
      },
    },
  },
  data() {
    return {
      value: "",
      tableData: [],
      selectKeys: [],
      columns: [
        {
          title: "",
          dataIndex: "roIndex",
          key: "roIndex",
          aling: "center",
        },
        {
          title: "意见",
          dataIndex: "fcontent",
          key: "fcontent",
          aling: "center",
        },
        {
          title: "操作",
          key: "action",
          aling: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      sId: "", //点击选中的id
    };
  },
  computed: {
    dataSource() {
      return this.tableData.filter((t, index) => {
        t.roIndex = index + 1;
        return t;
      });
    },
  },
  watch: {},
  mounted() {
    this.getList();
  },

  methods: {
    async getList(num) {
      flowOptionList({ ftype1: this.type }).then((res) => {
        if (res.success) {
          const { result } = res;
          this.tableData = result.records;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    select(row) {
      this.sId = row[this.rowId];
      this.$emit("change", row["fcontent"]);
    },
    optionAdd() {
      if (!this.value) {
        this.$VxeMessage({ content: "请输入意见", status: "warning" });
        return;
      }
      flowOptionAdd({
        fcontent: this.value,
        ftype1: this.type,
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.$emit("change", this.value);
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    optionDelete(row) {
      flowOptionDeleteBatch(row.id).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    rowClassName(record) {
      return record[this.rowId] === this.sId ? "active" : "";
    },
    customRow(record) {
      let flag = record[this.rowId] === this.sId;
      if (record[this.rowId] === this.sId) {
        return {
          style: {
            background: "rgb(240, 245, 255)",
          },
        };
      }else {
        return {}
      }
    },
  },
};
</script>

<style lang="less" scoped>
.opinion {
  width: 100%;
  height: 100px;
  padding: 12px;
  .a-input {
    width: 300px;
    height: 20px;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      border-bottom: 1px solid rgb(82, 79, 79);
      padding: 12px;
      div {
        display: flex;
      }
    }
  }
}
.active {
  background: rgb(240, 245, 255) !important;
}
</style>
